<template>
	<view class='login'>
		<view class='login__logo flex-cc'>
			<u-image class='mt50' width="200rpx" height="200rpx" shape="circle" src="/static/logo.png"></u-image>
		</view>
		
		<view class='p25 mt20'>
			<u-form :model="form" ref="uForm" class='px10 radius-8'>
				<u-form-item label-width='130' label="账号" prop="phone">
					<u-input v-model="form.phone" placeholder="请输入账号"/>
				</u-form-item>
				<u-form-item label-width='130' label="密码" prop="password">
					<u-input v-model="form.password" type='password' placeholder="请输入密码" />
				</u-form-item>
			</u-form>
			<view class='tr'>
				<navigator class='tr theme mt20 f12 u-inline-block' url='/pages/login/register'>还没有账号？立即注册</navigator>
			</view>
			
			<view class='mt20'>
				<u-button @click="submit" type="primary" class='f14'>提交</u-button>
			</view>
			<view class='tc mt40'>
				<image class='u-avatar u-auto' src="/static/wechart.png" mode="" @click='weChartLogin'></image>
			</view>
		</view>
	</view>
</template>

<script>
	const rules = require('utils/rules.js')
	export default {
		data() {
			return {
				redirect: null,
				form: { phone: '18898691768', password: null },
				rules: {
					// 手机号码
					phone: [{
							required: true, 
							message: '请输入账号', 
							trigger: ['blur'],
						}, {
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
				}
			};
		},
		methods:{
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						const res = await this.$http.post('login', this.form)
						
						// 存入缓存
						uni.setStorageSync('token', res.token)
						
						uni.switchTab({
							url: this.redirect ? this.redirect : '/pages/index/index',
							animationType: 'slide-in-right',
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			weChartLogin() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes.authResult);
					}
				});
			}
		},
		onLoad(params) {
			this.redirect = params.redirect
		},
		onReady() {
			this.$refs.uForm.setRules({ ...rules.rules, ...this.rules });
		}
	}
</script>

<style lang="scss">
.login {
	
}
</style>
